<template>
  <div class="myOrder">
    <div class="myOrderHeader">
<!--      <com-infor-header :title="title" :toComInfor="toComInfor"></com-infor-header>-->
      <com-infor-header :title="title"></com-infor-header>
    </div>
    <div class="myOrderIndex">
      <div class="indexOne">
        <van-dropdown-menu ref="test">
          <van-dropdown-item :title="title" @open="myOrder()" ref="item">
            <div v-for="(item, index) in myOrderData" class="allCategory">
              <p class="categoryTitle" :class="{allSelect: parseInt(item.id) === 0}">{{item.title}}</p>
              <ul v-if="item.children !== undefined" class="categoryUl">
                <li v-for="(child, childIndex) in item.children" class="categoryLi" :class="{selectedLi: liActive == child.id}" @click="selectLi(child.id,child.name)">
                  {{child.name}}
                </li>
              </ul>
            </div>
            <ul class="myOrderFooter">
              查看一年前订单
              <van-icon name="arrow" style="vertical-align: -.05rem" />
            </ul>
          </van-dropdown-item>

        </van-dropdown-menu>
      </div>
      <div class="indexTwo">
        <van-checkbox v-model="checked">仅查看有效订单</van-checkbox>
      </div>
    </div>
    <div class="myOrderContent">
      <div class="noOrder">
        <van-empty class="custom-image" image="./images/no-order-normal.png">
          <p class="noOrderUp">暂无一年内的订单</p>
          <p class="noOrderDown">一年不出游，两脚快生锈</p>
        </van-empty>
      </div>
      <div class="bottomBtn">
        <van-button type="default">
          <div style="padding: 4px 30px">
            <span style="vertical-align: .05rem">一年前的订单</span>
            <van-icon name="arrow" />
          </div>

        </van-button>
      </div>

    </div>

  </div>
</template>

<script>
import ComInforHeader from "@/components/ComInfor/Common/ComInforHeader";
import axios from "axios";
export default {
  name: "MyOrder",
  components: {
    ComInforHeader
  },
  data() {
    return {
      title: "全部订单",
      myOrderData: [],
      checked: true,
      liActive: 0,
    }
  },
  methods: {
    myOrder() {
      axios.get("/allCategory.json").then(res => {
        this.myOrderData = res.data;
      })
    },
    selectLi(val, name) {
      this.liActive = val;
      this.title = name;
      this.$refs.item.toggle();
    },
    // tChange() {
    //   let cal =  this.$refs.test.toggle();
    //   console.log(cal)
    // }
  }
}
</script>

<style scoped>
.myOrderIndex {
  width: 100%;
  text-align: center;
  display: flex;

}
.indexOne, .indexTwo {
  width: 46%;
}
.indexTwo {
  display: flex;
  margin: auto;
  justify-content: center;
}
.myOrderIndex >>> .van-dropdown-menu__bar {
  box-shadow: none;
}

.allCategory {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: .12rem .15rem 0;
  max-height: 5.0rem;
  box-sizing: border-box;
  overflow-y: scroll;
}
.categoryTitle {
  padding-bottom: .12rem;
  font-size: .28rem;
  color: #666;
  height: .25rem;
  line-height: .25rem;
}
.categoryUl {
  display: flex;
  flex-wrap: wrap;
}
.categoryLi {
  width: 30%;
  margin-left: .2rem;
  margin-bottom: .2rem;
  height: .7rem;
  line-height: .7rem;
  text-align: center;
  font-size: 16px;
  color: #222;
  border-radius: 4px;
  background: #f7f7f7;
}

.selectedLi {
  height: .7rem;
  line-height: .7rem;
}

.allSelect {
  height: .5rem;
  line-height: .6rem;
}

.allSelect, .selectedLi {
  width: 30%;
  margin-left: .2rem;
  margin-bottom: .2rem;
  text-align: center;
  font-size: 16px;
  background: rgba(83,184,244,0.1);
  border-radius: 4px;
  color: #0086f6;
}



.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
.noOrderUp {
  line-height: .6rem;
  text-align: center;
  font-size: .3rem;
  color: #333;
  font-weight: 700;
  white-space: nowrap;
}
.bottomBtn {
  text-align: center;
}
.btnStyle {
  display: flex;
  justify-content: space-between;
}
.myOrderFooter {
  float: left;
  padding: .2rem;
  font-size: 16px;
}
</style>